/**
 * 渲染系统核心模块
 *
 * 负责将虚拟DOM转换为实际UI元素并管理渲染过程
 * 处理组件挂载、更新、卸载和事件管理
 */

import { ReactElement } from "./createElement";
import { Component, uiComponentMgr } from "./component";
import { setCurrentComponent, componentHooks } from "./hooks";
import { RefObject } from "./jsx";

/**
 * 节点回调存储
 * 存储UI节点关联的生命周期和引用回调函数
 */
const nodeCallbacks = new WeakMap<
  UiNode,
  {
    onMount?: (node: UiNode) => void;
    onUnmount?: (node: UiNode) => void;
    ref?: ((node: UiNode) => void) | RefObject<UiNode>;
  }
>();

/**
 * 事件处理器缓存
 * 存储节点已注册的事件处理函数，用于清理和更新
 */
const nodeEventHandlers = new WeakMap<UiNode, Record<string, Function>>();

/**
 * 事件名称映射表
 * 将React风格事件名转换为原生UI系统事件名
 */
const eventNameMap: Record<string, string> = {
  onClick: "pointerdown",
  onMouseDown: "pointerdown",
  onMouseUp: "pointerup",
  onFocus: "focus",
  onBlur: "blur",
  onLoad: "load",
};

/**
 * 屏幕尺寸变化回调函数类型
 */
export type ResizeCallback = (size: ScreenResizeEvent) => void;

/**
 * 屏幕尺寸变化监听器集合
 */
const resizeCallbacks = new Set<ResizeCallback>();

/**
 * 当前屏幕尺寸状态
 * 保存最新的屏幕尺寸信息，可被组件访问
 */
export const currentScreenSize: ScreenResizeEvent = {
  screenWidth: screenWidth || 0,
  screenHeight: screenHeight || 0,
};

// 渲染系统内部状态
const instanceMap = new Map<ReactElement, UiNode>(); // 虚拟DOM到实际UI节点的映射
const componentRoots = new Map<Component<any, any>, ReactElement>(); // 组件到其根元素的映射
let nextComponentId = 0; // 组件实例ID生成器

/**
 * 组件路径类型
 * 表示组件在DOM树中的唯一位置
 */
type ComponentPath = string;

/**
 * 节点路径到组件实例的映射
 * 确保相同组件在不同位置有独立的状态
 */
const nodePathToInstance = new Map<ComponentPath, any>();

/**
 * 计算组件在DOM树中的路径
 * 用于唯一标识组件实例位置
 *
 * @param node UI节点
 * @returns 节点路径字符串
 */
function getComponentPath(node: UiNode): ComponentPath {
  const path: string[] = [];
  let current: UiNode | undefined = node;

  while (current) {
    const siblings = current.parent ? current.parent.children : [];
    const index = siblings.indexOf(current);
    path.unshift(`${current.name || "unnamed"}_${index}`);
    current = current.parent;
  }

  return path.join("/");
}

/**
 * 节点可见性状态存储
 */
const nodeVisibilityMap = new WeakMap<UiNode, boolean>();

/**
 * 设置节点可见性
 *
 * @param node 目标UI节点
 * @param visible 是否可见
 */
export function setNodeVisibility(node: UiNode, visible: boolean) {
  if (!node) return;

  // 保存可见性状态
  nodeVisibilityMap.set(node, visible);

  // 根据节点类型设置可见性属性
  if ("visible" in node) {
    (node as any).visible = visible;
  } else if ("opacity" in node) {
    (node as any).opacity = visible ? 1 : 0;
  }

  // 如果节点有名称，通过组件管理器设置可见性
  if (node.name) {
    try {
      if (visible) {
        uiComponentMgr.show(node.name);
      } else {
        uiComponentMgr.hide(node.name);
      }
    } catch (err) {
      // 组件管理器可能不支持该操作，忽略错误
    }
  }
}

/**
 * 获取节点可见性状态
 *
 * @param node 目标UI节点
 * @returns 节点是否可见
 */
export function getNodeVisibility(node: UiNode): boolean {
  if (!node) return false;
  return nodeVisibilityMap.get(node) !== false;
}

/**
 * 初始化屏幕尺寸监听系统
 * 在应用启动时自动调用
 */
function initScreenResizeListener() {
  // 确保screen对象存在
  if (typeof screen !== "undefined" && screen && screen.events) {
    // 监听屏幕尺寸变化事件
    screen.events.on("resize", (event: ScreenResizeEvent) => {
      // 更新尺寸状态
      currentScreenSize.screenWidth = event.screenWidth;
      currentScreenSize.screenHeight = event.screenHeight;

      // 通知所有监听器
      resizeCallbacks.forEach((callback) => {
        try {
          callback({
            screenWidth: event.screenWidth,
            screenHeight: event.screenHeight,
          });
        } catch (error) {
          console.error("屏幕尺寸回调错误:", error);
        }
      });
    });

    // 初始化当前尺寸并触发初始通知
    currentScreenSize.screenWidth = screenWidth || 0;
    currentScreenSize.screenHeight = screenHeight || 0;

    setTimeout(() => {
      resizeCallbacks.forEach((callback) => {
        try {
          callback({ ...currentScreenSize });
        } catch (error) {
          console.error("初始屏幕尺寸回调错误:", error);
        }
      });
    }, 0);
  } else {
    console.warn("全局screen对象不可用，屏幕尺寸监听功能已禁用");
  }
}

/**
 * 添加屏幕尺寸变化监听器
 *
 * @param callback 当屏幕尺寸变化时调用的函数
 * @returns 用于移除监听器的清理函数
 */
export function addResizeListener(callback: ResizeCallback): () => void {
  if (typeof callback !== "function") {
    console.error("addResizeListener: 回调必须是函数类型");
    return () => {};
  }

  // 添加到监听器集合
  resizeCallbacks.add(callback);

  // 立即以当前尺寸调用一次
  try {
    callback({ ...currentScreenSize });
  } catch (error) {
    console.error("初始屏幕尺寸回调错误:", error);
  }

  // 确保初始化监听器已设置
  if (!createRoot.initialized) {
    initScreenResizeListener();
    createRoot.initialized = true;
  }

  // 返回移除监听器的函数
  return () => {
    resizeCallbacks.delete(callback);
  };
}

/**
 * 获取对象的条目的辅助函数（替代Object.entries）
 */
function getObjectEntries(obj: Record<string, any>): [string, any][] {
  const result: [string, any][] = [];
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      result.push([key, obj[key]]);
    }
  }
  return result;
}

/**
 * 处理位置和尺寸转换
 */
function applyCoordProperty(nodeCoord: Coord2, styleCoord: any) {
  if (!styleCoord) return;

  // 处理偏移
  if (styleCoord.offset) {
    if (typeof styleCoord.offset.copy === "function") {
      nodeCoord.offset.copy(styleCoord.offset);
    } else if (typeof styleCoord.offset === "object") {
      nodeCoord.offset.x = styleCoord.offset.x ?? nodeCoord.offset.x;
      nodeCoord.offset.y = styleCoord.offset.y ?? nodeCoord.offset.y;
    }
  }

  // 处理缩放
  if (styleCoord.scale) {
    if (typeof styleCoord.scale.copy === "function") {
      nodeCoord.scale.copy(styleCoord.scale);
    } else if (typeof styleCoord.scale === "object") {
      nodeCoord.scale.x = styleCoord.scale.x ?? nodeCoord.scale.x;
      nodeCoord.scale.y = styleCoord.scale.y ?? nodeCoord.scale.y;
    }
  }
}

/**
 * 处理颜色转换
 */
function applyColorProperty(nodeColor: Vec3, styleColor: any) {
  if (!styleColor) return;

  if (typeof styleColor.copy === "function") {
    nodeColor.copy(styleColor);
  } else if ("r" in styleColor && "g" in styleColor && "b" in styleColor) {
    nodeColor.r = styleColor.r;
    nodeColor.g = styleColor.g;
    nodeColor.b = styleColor.b;
  }
}

/**
 * 处理Ref回调
 */
function handleRef(
  node: UiNode,
  ref: ((node: UiNode) => void) | RefObject<UiNode> | undefined
) {
  if (!ref) return;

  // 检查该节点是否已经处理过相同的ref
  const callbacks = nodeCallbacks.get(node) || {};

  // 如果是相同的ref函数，不要重复执行
  if (callbacks.ref === ref) {
    return;
  }

  // 保存ref以便在卸载时处理
  callbacks.ref = ref;
  nodeCallbacks.set(node, callbacks);

  // 执行ref回调或设置ref对象
  if (typeof ref === "function") {
    // 只在首次设置该ref时调用回调
    ref(node);
  } else if (ref && "current" in ref) {
    ref.current = node;
  }
}

/**
 * 处理生命周期回调
 */
function handleLifecycleCallbacks(node: UiNode, props: Record<string, any>) {
  // 获取已有的回调信息，如果没有则创建新的
  const callbacks = nodeCallbacks.get(node) || {};
  const isNewNode = !nodeCallbacks.has(node);

  // 保存生命周期回调
  if (props.onMount) {
    callbacks.onMount = props.onMount;
  }

  if (props.onUnmount) {
    callbacks.onUnmount = props.onUnmount;
  }

  // 保存回调引用
  nodeCallbacks.set(node, callbacks);

  // 执行挂载回调（下一个事件循环）但只在节点首次创建时
  if (callbacks.onMount && isNewNode) {
    setTimeout(() => {
      if (node.parent) {
        // 确保节点仍然挂载
        // 设置节点为可见状态 - 在组件挂载时
        setNodeVisibility(node, true);
        callbacks.onMount!(node);
      }
    }, 0);
  } else if (isNewNode) {
    // 即使没有显式定义onMount回调，也默认在挂载时设置节点为可见
    setTimeout(() => {
      if (node.parent) {
        setNodeVisibility(node, true);
      }
    }, 0);
  }
}

/**
 * 清理节点上的所有事件监听器
 */
function cleanupEventListeners(node: UiNode) {
  const handlers = nodeEventHandlers.get(node);
  if (!handlers) return;

  // 移除所有注册的事件监听器
  for (const [eventName, handler] of Object.entries(handlers)) {
    if ("removeEventListener" in node) {
      (node as any).removeEventListener(eventName, handler);
    } else if ("events" in node && "off" in (node as any).events) {
      (node as any).events.off(eventName, handler);
    }
  }

  // 清空事件处理程序缓存
  nodeEventHandlers.delete(node);
}

/**
 * 执行卸载回调
 */
function executeUnmountCallback(node: UiNode) {
  // 获取注册的回调
  const callbacks = nodeCallbacks.get(node);

  try {
    // 首先递归处理所有子节点的卸载回调
    if (node.children && node.children.length > 0) {
      // 创建一个副本，因为回调可能会修改children数组
      const childrenCopy = [...node.children];
      for (const child of childrenCopy) {
        executeUnmountCallback(child);
      }
    }

    // 然后处理当前节点的回调
    if (callbacks) {
      // 执行卸载回调
      if (callbacks.onUnmount) {
        callbacks.onUnmount(node);
      }

      // 清空ref
      if (callbacks.ref) {
        if (typeof callbacks.ref === "function") {
          // 函数型ref不需要特别处理
        } else if ("current" in callbacks.ref) {
          callbacks.ref.current = null;
        }
      }

      // 清理事件监听器
      cleanupEventListeners(node);

      // 设置节点为隐藏状态 - 在组件卸载时
      setNodeVisibility(node, false);

      // 删除回调记录
      nodeCallbacks.delete(node);
    } else {
      // 即使没有回调也设置为隐藏
      setNodeVisibility(node, false);
    }
  } catch (err) {
    console.error("执行onUnmount回调时出错:", err);
  }
}

/**
 * 从虚拟元素创建React UI节点
 */
function createNode(element: ReactElement): UiNode {
  const { type, props } = element;

  if (type === "TEXT_ELEMENT") {
    const text = UiText.create();
    text.textContent = props.text || "";
    text.size.offset.copy(Vec2.create({ x: 0, y: 0 }));
    text.size.scale.copy(Vec2.create({ x: 1, y: 1 }));

    // 设置初始可见性
    setNodeVisibility(text, true);

    return text;
  }

  let node: UiNode;

  // 处理DOM元素
  switch (type) {
    case "box":
      node = UiBox.create();
      break;
    case "text":
      node = UiText.create();
      break;
    case "input":
      node = UiInput.create();
      break;
    case "image":
      node = UiImage.create();
      break;
    case "scrollBox":
      node = UiScrollBox.create();
      break;
  }

  // 应用属性到节点
  updateNodeProps(node, props);

  handleLifecycleCallbacks(node, props);

  // 设置初始可见性
  setNodeVisibility(node, true);

  return node;
}

/**
 * 使用属性更新UI节点
 */
function updateNodeProps(node: UiNode, props: Record<string, any>) {
  // 自动将有名称的节点注册到ComponentManager
  if (props.name && node) {
    // @ts-expect-error
    uiComponentMgr.register(props.name, node);
  }

  if (!props) return;

  // 处理style对象
  if (props.style) {
    // 通用样式处理函数
    const processStyleProperties = (styleObj: Record<string, any>) => {
      for (const [key, value] of getObjectEntries(styleObj)) {
        // 跳过处理复合对象，这些需要特殊处理
        if (key === "position" || key === "size") continue;

        // 检查节点是否有对应属性
        if (key in node) {
          // 根据属性类型进行不同处理
          if (value && typeof value === "object") {
            if (
              "r" in value &&
              "g" in value &&
              "b" in value &&
              key.includes("Color")
            ) {
              // 颜色属性处理
              if (typeof (node as any)[key].copy === "function") {
                applyColorProperty((node as any)[key], value);
              }
            } else {
              // 其他复杂对象属性，尝试复制或直接赋值
              if (typeof (node as any)[key].copy === "function") {
                (node as any)[key].copy(value);
              } else {
                (node as any)[key] = value;
              }
            }
          } else {
            // 简单类型直接赋值
            (node as any)[key] = value;
          }
        }
      }
    };

    // 处理特殊的复合对象属性
    if (props.style.position && "position" in node) {
      applyCoordProperty((node as any).position, props.style.position);
    }

    if (props.style.size && "size" in node) {
      applyCoordProperty((node as any).size, props.style.size);
    }

    // 处理所有其他样式属性
    processStyleProperties(props.style);
  }

  // 处理直接属性（这些属性优先于style中的同名属性）
  const processDirectProperties = () => {
    for (const [key, value] of getObjectEntries(props)) {
      // 跳过特殊属性和事件处理程序
      if (
        key === "style" ||
        key === "children" ||
        key === "ref" ||
        key.startsWith("on")
      ) {
        continue;
      }

      // 检查节点是否有对应属性
      if (key in node) {
        // 直接设置属性值
        (node as any)[key] = value;
      }
    }
  };

  // 处理直接属性
  processDirectProperties();

  // 清理旧的事件监听器，防止重复注册
  cleanupEventListeners(node);

  // 创建新的事件处理程序映射
  const newEventHandlers: Record<string, Function> = {};

  // 添加事件监听器
  for (const [name, value] of getObjectEntries(props)) {
    if (name.startsWith("on") && typeof value === "function") {
      const eventName = eventNameMap[name] || name.toLowerCase().substring(2);

      // 保存事件处理程序，以便以后清理
      newEventHandlers[eventName] = value;

      // 添加事件监听器
      if ("addEventListener" in node) {
        (node as any).addEventListener(eventName, value);
      } else if ("events" in node && "on" in (node as any).events) {
        (node as any).events.on(eventName, value);
      }
    }
  }

  // 保存新的事件处理程序映射
  if (Object.keys(newEventHandlers).length > 0) {
    nodeEventHandlers.set(node, newEventHandlers);
  }

  // 处理ref属性
  if (props.ref) {
    setTimeout(() => {
      handleRef(node, props.ref);
    }, 0);
  }

  // 处理生命周期回调
  handleLifecycleCallbacks(node, props);
}

/**
 * 协调元素的子元素与其DOM节点
 */
function reconcileChildren(
  parentNode: UiNode,
  element: ReactElement,
  oldVirtualChildren: ReactElement[] = [],
  newVirtualChildren: ReactElement[] = []
) {
  // 创建一个Fragment ID以便在同一轮中添加多个子元素时保持一致性
  const reconcileId = `reconcile_${Date.now()}_${Math.floor(
    Math.random() * 1000
  )}`;

  const maxLength = Math.max(
    oldVirtualChildren.length,
    newVirtualChildren.length
  );

  // 第一阶段：处理需要删除的子元素
  for (let i = 0; i < oldVirtualChildren.length; i++) {
    const oldChild = oldVirtualChildren[i];
    const newChild =
      i < newVirtualChildren.length ? newVirtualChildren[i] : null;

    if (oldChild && !newChild) {
      // 移除旧子元素
      const oldChildNode = instanceMap.get(oldChild);

      // 处理Fragment特殊情况 - 当Fragment条件渲染从有到无
      const isOldChildFragment =
        oldChild.type === "fragment" || oldChild.type === undefined;

      // 函数组件的特殊处理：查找并清理实例资源
      if (typeof oldChild.type === "function") {
        const pathPrefix = parentNode
          ? `${parentNode.name || "root"}_`
          : "root_";
        const typeName = oldChild.type.name || "Component";

        // 查找匹配的组件实例
        for (const [key, instance] of nodePathToInstance.entries()) {
          if (
            key.startsWith(`${typeName}_${pathPrefix}`) &&
            instance.type === oldChild.type
          ) {
            // 查找此实例的顶层节点
            const rootNode = instanceMap.get(instance.result);
            if (rootNode) {
              // 对于Fragment包装的组件，不要隐藏父节点，只处理其子元素
              if (isOldChildFragment && rootNode === parentNode) {
                // 只清理Fragment子元素，不隐藏父节点
                if (oldChild.children) {
                  for (const fragmentChild of oldChild.children) {
                    const fragmentChildNode = instanceMap.get(fragmentChild);
                    if (fragmentChildNode) {
                      // 确保对每个子节点执行卸载回调
                      executeUnmountCallback(fragmentChildNode);
                      fragmentChildNode.parent = undefined;
                      instanceMap.delete(fragmentChild);
                    }
                  }
                }
              } else {
                // 对于普通组件，执行卸载回调并隐藏节点
                if (rootNode !== parentNode) {
                  executeUnmountCallback(rootNode);
                }
              }
            }

            // 执行钩子清理
            ensureCleanupFunctions(instance);

            // 从实例映射中移除
            nodePathToInstance.delete(key);
            break;
          }
        }
      }

      // 通常的节点卸载处理
      if (oldChildNode && oldChildNode.parent === parentNode) {
        // 对于Fragment，不要隐藏父节点，只处理其子元素
        if (isOldChildFragment && oldChildNode === parentNode) {
          // 只清理Fragment子元素，不隐藏父节点
          if (oldChild.children) {
            for (const fragmentChild of oldChild.children) {
              const fragmentChildNode = instanceMap.get(fragmentChild);
              if (fragmentChildNode) {
                // 确保执行卸载回调
                executeUnmountCallback(fragmentChildNode);
                fragmentChildNode.parent = undefined;
                instanceMap.delete(fragmentChild);
              }
            }
          }
        } else {
          // 普通节点，先执行卸载回调再解除父子关系
          // 这确保onUnmount回调在节点仍可访问时执行
          executeUnmountCallback(oldChildNode);
          oldChildNode.parent = undefined;
          instanceMap.delete(oldChild);
        }
      } else if (oldChildNode) {
        // 节点可能已经从其父节点分离，但仍需要执行卸载回调
        executeUnmountCallback(oldChildNode);
        instanceMap.delete(oldChild);
      }
    }
  }

  // 第二阶段：更新和添加子元素
  for (let i = 0; i < newVirtualChildren.length; i++) {
    const oldChild =
      i < oldVirtualChildren.length ? oldVirtualChildren[i] : null;
    const newChild = newVirtualChildren[i];

    if (!oldChild && newChild) {
      // 添加新子元素
      // 为Fragment子元素添加索引信息以确保独立渲染
      if (!newChild.props) {
        newChild.props = {};
      }
      newChild.props._reconcileIndex = i;
      newChild.props._reconcileId = reconcileId;

      const childNode = render(newChild, parentNode);
      if (childNode) {
        childNode.parent = parentNode;

        // 为每个子元素生成唯一名称
        if (parentNode.name) {
          const typeName =
            typeof newChild.type === "function"
              ? newChild.type.name || "Component"
              : newChild.type || "element";
          childNode.name = `${parentNode.name}_${typeName}_${i}`;
        }

        // 确保新添加的节点是可见的
        setNodeVisibility(childNode, true);
      }
    } else if (oldChild && newChild) {
      // 更新现有子元素
      // 同样为更新的元素添加索引信息
      if (!newChild.props) {
        newChild.props = {};
      }
      newChild.props._reconcileIndex = i;
      newChild.props._reconcileId = reconcileId;

      updateElement(oldChild, newChild, parentNode);
    }
  }
}

/**
 * 处理Fragment元素的特殊情况
 */
function updateFragmentElement(
  oldElement: ReactElement,
  newElement: ReactElement,
  parentNode: UiNode
) {
  // 为新的Fragment创建一个唯一ID
  const fragmentId = `fragment_${Date.now()}_${Math.floor(
    Math.random() * 1000
  )}`;

  // 检测是否需要彻底重建Fragment
  let needsRebuild = false;

  // 如果子元素数量不同则需要重建
  if (
    (oldElement.children?.length || 0) !== (newElement.children?.length || 0)
  ) {
    needsRebuild = true;
  }

  if (needsRebuild) {
    // 保存当前子节点的名称和实例，以便能找到被移除的节点
    const oldChildNames = new Map<string, UiNode>();
    for (const child of parentNode.children) {
      if (child.name) {
        oldChildNames.set(child.name, child);
      }
    }

    // 清理旧的Fragment子元素
    if (oldElement.children) {
      for (let i = 0; i < oldElement.children.length; i++) {
        const child = oldElement.children[i];
        if (child) {
          const childNode = instanceMap.get(child);

          // 只卸载那些确实是当前Fragment子元素的节点
          if (childNode && childNode.parent === parentNode) {
            // 执行卸载回调
            executeUnmountCallback(childNode);
            childNode.parent = undefined;
            instanceMap.delete(child);

            // 从名称映射中移除
            if (childNode.name) {
              oldChildNames.delete(childNode.name);
            }
          }
        }
      }
    }

    // 清理任何可能被条件渲染暂时移除的节点
    for (const [name, node] of oldChildNames.entries()) {
      if (name.includes("_element_") || name.includes("_Component_")) {
        executeUnmountCallback(node);
        node.parent = undefined;
      }
    }

    // 重新渲染整个Fragment
    if (newElement.children) {
      for (let i = 0; i < newElement.children.length; i++) {
        const child = newElement.children[i];
        if (child) {
          // 添加Fragment索引信息
          if (!child.props) {
            child.props = {};
          }
          child.props._fragmentIndex = i;
          child.props._fragmentId = fragmentId;

          // 确保也传递协调索引
          child.props._reconcileIndex = i;

          // 直接渲染子元素到父节点
          const childNode = render(child, parentNode);
          if (childNode) {
            childNode.parent = parentNode;

            // 生成唯一的名称
            if (parentNode.name) {
              const typeName =
                typeof child.type === "function"
                  ? child.type.name || "Component"
                  : child.type || "element";
              childNode.name = `${parentNode.name}_${typeName}_${i}`;
            } else {
              childNode.name = `fragment_child_${fragmentId}_${i}`;
            }

            // 确保子节点是可见的
            setNodeVisibility(childNode, true);
          }
        }
      }
    }
  } else {
    // 更新现有元素而不重建
    const childCount = newElement.children ? newElement.children.length : 0;

    for (let i = 0; i < childCount; i++) {
      const oldChild = oldElement.children && oldElement.children[i];
      const newChild = newElement.children && newElement.children[i];

      if (oldChild && newChild) {
        // 添加Fragment索引信息
        if (!newChild.props) {
          newChild.props = {};
        }
        newChild.props._fragmentIndex = i;
        newChild.props._fragmentId = fragmentId;

        // 确保也传递协调索引
        newChild.props._reconcileIndex = i;

        // 更新元素
        updateElement(oldChild, newChild, parentNode);
      }
    }
  }

  // 确保所有子节点都是可见的
  if (newElement.children) {
    for (const child of newElement.children) {
      const childNode = instanceMap.get(child);
      if (childNode) {
        setNodeVisibility(childNode, true);
      }
    }
  }

  // 更新实例映射
  instanceMap.delete(oldElement);
  instanceMap.set(newElement, parentNode);
}

/**
 * 更新DOM中的现有元素
 */
function updateElement(
  oldElement: ReactElement,
  newElement: ReactElement,
  parentNode: UiNode
) {
  // 检查元素类型
  if (oldElement.type !== newElement.type) {
    // 类型不同，替换节点
    const oldNode = instanceMap.get(oldElement);
    if (oldNode) {
      // 如果旧元素是函数组件，确保清理它的副作用
      if (typeof oldElement.type === "function") {
        const pathPrefix = parentNode
          ? `${parentNode.name || "root"}_`
          : "root_";
        const typeName = oldElement.type.name || "Component";

        // 查找匹配的组件实例
        for (const [key, instance] of nodePathToInstance.entries()) {
          if (
            key.startsWith(`${typeName}_${pathPrefix}`) &&
            instance.type === oldElement.type
          ) {
            // 查找此实例的顶层节点
            const rootNode = instanceMap.get(instance.result);
            if (rootNode) {
              // 确保执行卸载回调
              executeUnmountCallback(rootNode);
              // 确保节点设置为隐藏
              setNodeVisibility(rootNode, false);
            }

            // 执行钩子清理
            ensureCleanupFunctions(instance);

            // 从实例映射中移除
            nodePathToInstance.delete(key);
            break;
          }
        }
      }

      // 调用卸载生命周期
      executeUnmountCallback(oldNode);
      // 设置旧节点为隐藏状态
      setNodeVisibility(oldNode, false);

      const newNode = render(newElement, parentNode);
      if (newNode && oldNode.parent === parentNode) {
        // 移除旧节点，添加新节点
        oldNode.parent = undefined;
        newNode.parent = parentNode;

        // 设置新节点为可见状态
        setNodeVisibility(newNode, true);
      }
      instanceMap.delete(oldElement);
    }
    return;
  }

  // 处理Fragment元素的特殊情况
  if (
    (oldElement.type === "fragment" || oldElement.type === undefined) &&
    (newElement.type === "fragment" || newElement.type === undefined)
  ) {
    // 使用专门的Fragment更新函数
    updateFragmentElement(oldElement, newElement, parentNode);
    return;
  }

  // 处理函数组件的特殊情况
  if (
    typeof oldElement.type === "function" &&
    typeof newElement.type === "function"
  ) {
    // 查找父组件传递给子组件的路径
    const pathPrefix = parentNode ? `${parentNode.name || "root"}_` : "root_";
    const typeName = oldElement.type.name || "Component";

    // 遍历所有实例查找匹配的组件实例
    for (const [key, instance] of nodePathToInstance.entries()) {
      if (
        key.startsWith(`${typeName}_${pathPrefix}`) &&
        instance.type === oldElement.type
      ) {
        // 检查props是否变化
        const newProps = {
          ...newElement.props,
          children:
            newElement.children && newElement.children.length
              ? newElement.children.length === 1
                ? newElement.children[0]
                : newElement.children
              : undefined,
        };

        // 检查条件渲染相关的props - 如果出现从show变为hidden的情况
        if (
          // 检查常见的条件渲染prop
          ("visible" in instance.props &&
            instance.props.visible === true &&
            (!("visible" in newProps) || newProps.visible === false)) ||
          ("hidden" in instance.props &&
            instance.props.hidden === false &&
            "hidden" in newProps &&
            newProps.hidden === true) ||
          ("display" in instance.props &&
            instance.props.display !== "none" &&
            "display" in newProps &&
            newProps.display === "none")
        ) {
          // 处理从显示到隐藏的情况 - 执行清理函数
          ensureCleanupFunctions(instance);
        }

        // 强制更新props和重新渲染
        instance.props = newProps;
        instance.update();

        // 更新映射
        instanceMap.delete(oldElement);
        instanceMap.set(newElement, instanceMap.get(oldElement) || null);
        return;
      }
    }

    // 如果找不到匹配的实例，只更新映射
    instanceMap.delete(oldElement);
    instanceMap.set(newElement, instanceMap.get(oldElement) || null);
    return;
  }

  // 获取现有DOM节点
  const node = instanceMap.get(oldElement);
  if (!node) return;

  // 更新现有节点上的属性
  updateNodeProps(node, newElement.props);

  // 处理ref变更
  if (oldElement.props.ref !== newElement.props.ref && newElement.props.ref) {
    setTimeout(() => {
      handleRef(node, newElement.props.ref);
    }, 0);
  }

  // 处理生命周期回调变更
  handleLifecycleCallbacks(node, newElement.props);

  // 更新子元素
  reconcileChildren(node, newElement, oldElement.children, newElement.children);

  // 更新实例映射
  instanceMap.delete(oldElement);
  instanceMap.set(newElement, node);
}

/**
 * 渲染组件
 */
function renderComponent(
  element: ReactElement,
  parentNode: UiNode
): UiNode | null {
  const { type, props } = element;

  if (typeof type === "function") {
    if (type.prototype && type.prototype.render) {
      // 类组件 - 保持原有逻辑不变
      const classComponent = new (type as any)(props);
      classComponent.updater = () => {
        const oldRoot = componentRoots.get(classComponent);
        const newRoot = classComponent.render();

        if (oldRoot && newRoot) {
          updateElement(oldRoot, newRoot, parentNode);
          componentRoots.set(classComponent, newRoot);
        }
      };

      const rendered = classComponent.render();
      if (!rendered) return null;

      componentRoots.set(classComponent, rendered);
      const node = render(rendered, parentNode);

      // 调用生命周期方法
      setTimeout(() => {
        if (classComponent.componentDidMount) {
          classComponent.componentDidMount();
        }
      }, 0);

      return node;
    } else {
      // 函数组件的实例管理逻辑
      // 这里的关键问题：需要确保在相同的父节点下，每个不同位置的组件实例都有唯一标识
      const componentPosition =
        props._fragmentIndex !== undefined
          ? props._fragmentIndex
          : props._reconcileIndex !== undefined
          ? props._reconcileIndex
          : (parentNode.children || []).length;

      // 添加更多唯一性信息，确保实例不会被错误覆盖
      const path = parentNode
        ? `${parentNode.name || "root"}_${componentPosition}_${Date.now()}`
        : `root_${Date.now()}`;

      const instanceKey = `${
        type.name || "Component"
      }_${path}_${nextComponentId++}_${componentPosition}`;

      // 确保 props 中包含 children
      const propsWithChildren: Record<string, any> = {
        ...props,
        children:
          element.children && element.children.length
            ? element.children.length === 1
              ? element.children[0]
              : element.children
            : undefined,
      };

      // 添加位置信息
      propsWithChildren._parentNodePath = path;
      propsWithChildren._componentPosition = componentPosition;

      // 创建新的函数组件实例
      const instance = {
        props: propsWithChildren,
        type,
        path: instanceKey,
        position: componentPosition,
        isUpdating: false,
        _updateThrottled: false,
        result: null as any,
        update: function () {
          // 防止频繁更新
          if (this.isUpdating && this._updateThrottled) {
            return;
          }

          // 标记组件正在更新
          this._updateThrottled = true;
          this.isUpdating = true;

          const oldRoot = this.result;

          // 更新组件
          setCurrentComponent(this);
          try {
            // 使用最新的props渲染
            const newRoot = (type as Function)(this.props);
            this.result = newRoot;

            if (oldRoot && newRoot) {
              // 执行深度更新，确保子组件能被更新
              const isFragment =
                newRoot.type === "fragment" || newRoot.type === undefined;

              // 更新DOM
              updateElement(oldRoot, newRoot, parentNode);

              // 处理Fragment子组件
              if (isFragment && newRoot.children) {
                for (const child of newRoot.children) {
                  if (child && typeof child.type === "function") {
                    // 查找子组件实例
                    const childPath = `${
                      type.name || "Component"
                    }_${path}_child`;
                    for (const [
                      childKey,
                      childInstance,
                    ] of nodePathToInstance.entries()) {
                      if (
                        childKey.startsWith(childPath) &&
                        childInstance.type === child.type
                      ) {
                        // 更新子组件props
                        const childProps = {
                          ...(child.props || {}),
                          children: child.children,
                        };
                        childInstance.props = childProps;
                        childInstance.update();
                        break;
                      }
                    }
                  }
                }
              }
            } else if (newRoot) {
              // 如果是第一次渲染
              render(newRoot, parentNode);
            }
          } catch (err) {
            console.error("Error updating component:", err);
          } finally {
            // 完成更新后解除锁定
            this.isUpdating = false;

            // 延迟准备下次更新
            setTimeout(() => {
              this._updateThrottled = false;
            }, 20);
          }
        },
      };

      // 存储组件实例
      nodePathToInstance.set(instanceKey, instance);

      // 设置当前组件上下文
      setCurrentComponent(instance);

      try {
        // 渲染组件
        const rendered = (type as Function)(instance.props);
        instance.result = rendered;

        if (!rendered) return null;

        // 添加位置信息到渲染结果
        if (rendered.props === undefined) {
          rendered.props = {};
        }
        rendered.props._parentComponentPosition = componentPosition;

        // 渲染并确保可见
        const componentNode = render(rendered, parentNode);
        if (componentNode) {
          setNodeVisibility(componentNode, true);
        }
        return componentNode;
      } catch (error) {
        console.error(`组件渲染错误:`, error);
        return null;
      }
    }
  }

  return null;
}

/**
 * 主渲染函数
 * @param element 要渲染的React元素
 * @param parentNode 父UI节点，作为渲染的容器
 * @returns 创建的UI节点或null（如果是片段或组件）
 */
export function render(
  element: ReactElement | null,
  parentNode: UiNode
): UiNode | null {
  if (!element) return null;

  const { type } = element;

  // 处理组件渲染
  if (typeof type === "function") {
    return renderComponent(element, parentNode);
  }

  // 处理片段 - 将所有子元素直接渲染到父节点
  // 片段可以是"fragment"或undefined类型
  if (type === "fragment" || type === undefined) {
    // 为Fragment创建一个唯一ID，避免同一组件中多个Fragment混淆
    const fragmentId = `fragment_${Date.now()}_${Math.floor(
      Math.random() * 1000
    )}`;
    instanceMap.set(element, parentNode);

    // 对于片段，我们不创建节点，只是将所有子元素直接渲染到父节点
    if (element.children) {
      // 为每个子元素创建一个唯一的key，如果它们没有提供
      for (let i = 0; i < element.children.length; i++) {
        const child = element.children[i];
        if (child) {
          // 添加唯一的key值，确保不会被覆盖
          if (!child.props) {
            child.props = {};
          }

          // 添加Fragment索引信息到props中，供子组件识别自己的序号
          child.props._fragmentIndex = i;
          child.props._fragmentId = fragmentId;

          // 如果child是函数组件，确保其子组件也可以分辨自己在Fragment中的位置
          if (typeof child.type === "function") {
            // 将位置信息传递给函数组件
            child.props._isInFragment = true;
          }

          // 直接渲染子元素到父节点
          const childNode = render(child, parentNode);
          if (childNode) {
            // 确保子节点能正确获取父节点信息
            childNode.parent = parentNode;

            // 生成唯一的名称
            if (parentNode.name) {
              const typeName =
                typeof child.type === "function"
                  ? child.type.name || "Component"
                  : child.type || "element";
              childNode.name = `${parentNode.name}_${typeName}_${i}`;
            } else {
              childNode.name = `fragment_child_${fragmentId}_${i}`;
            }

            // 确保子节点是可见的
            setNodeVisibility(childNode, true);
          }
        }
      }
    }

    // 返回父节点但确保它不会因为Fragment的条件渲染而被隐藏
    return parentNode;
  }

  // 创建DOM节点
  const node = createNode(element);
  instanceMap.set(element, node);

  // 设置父引用
  node.parent = parentNode;

  // 添加子元素
  if (element.children) {
    element.children.forEach((child) => {
      if (child) {
        const childNode = render(child, node);
        if (childNode) {
          // 确保子节点能正确获取父节点信息
          childNode.parent = node;
          // 如果父节点有name，确保子节点也能获取到
          if (node.name) {
            childNode.name = `${node.name}_child`;
          }
        }
      }
    });
  }

  return node;
}

/**
 * 创建渲染根节点
 * @param container 可选的容器UI节点，如果未提供则创建一个新的UiScreen
 * @param name 可选的根节点名称
 * @returns 包含render方法的根节点对象
 */
export function createRoot(container?: UiNode, name?: string) {
  // 初始化屏幕大小监听器（只需执行一次）
  if (!createRoot.initialized) {
    initScreenResizeListener();
    createRoot.initialized = true;
  }

  // 如果没有提供容器，创建一个UiScreen作为默认容器
  const rootContainer = container || UiScreen.create();
  if (name) {
    rootContainer.name = name;
  }

  // 保存旧的渲染元素，以便在重新渲染时清理
  let currentRenderedElement: ReactElement | null = null;

  return {
    /**
     * 渲染React元素到根容器
     * @param element 要渲染的React元素
     */
    render(element: ReactElement) {
      // 清除现有子元素
      while (rootContainer.children.length > 0) {
        const child = rootContainer.children[0];

        // 确保执行卸载回调
        executeUnmountCallback(child);
        child.parent = undefined;
      }

      // 如果有旧的渲染元素，清理它
      if (currentRenderedElement) {
        // 为每个旧元素执行卸载回调
        const cleanupOldElement = (el: ReactElement) => {
          const node = instanceMap.get(el);
          if (node) {
            executeUnmountCallback(node);
            instanceMap.delete(el);
          }

          // 递归处理子元素
          if (el.children) {
            el.children.forEach(cleanupOldElement);
          }
        };

        cleanupOldElement(currentRenderedElement);
      }

      // 保存新的渲染元素
      currentRenderedElement = element;

      // 渲染新元素
      render(element, rootContainer);
    },
  };
}

// 添加初始化标志
createRoot.initialized = false;

/**
 * 确保执行组件的清理函数，清理所有相关资源
 */
function ensureCleanupFunctions(instance: any) {
  if (!instance) return;

  // 获取此组件实例的钩子
  const hooks = componentHooks.get(instance);
  if (!hooks) return;

  // 获取组件的根节点
  const rootNode = instance.result ? instanceMap.get(instance.result) : null;
  // 如果存在根节点，设置为隐藏状态
  if (rootNode) {
    setNodeVisibility(rootNode, false);
  }

  // 遍历所有钩子，执行清理函数
  for (const hook of hooks) {
    if (hook && typeof hook.cleanup === "function") {
      try {
        // 执行清理函数
        hook.cleanup();
      } catch (err) {
        console.error("执行组件清理函数时出错:", err);
      }
    }
  }

  // 从钩子存储中移除
  componentHooks.delete(instance);
}
